import React, { Component, createRef, forwardRef } from 'react';


// 函数式组件无法直接使用 ref,如果需要使用可以使用 forwardRef 进行包裹
// forwardRef: 是一个高阶组件，接收一个组件返回一个新的组件。让函数式组件使用 ref
// const Content = React.forwardRef((props, ref)=>{
const Content = forwardRef((props, ref)=>{

  return (<h1 ref={ref}>你笑起来真好看</h1>)
})

class App extends Component {

  // 创建一个 ref
  contentRef = createRef()

  render() {
    return (
      <div>
        <Content ref={this.contentRef} />

        <button onClick={()=>{
          // 函数式组件无法直接使用 ref,控制台警告说要使用 React.forwardRef()
          console.log(this.contentRef.current);

        }}> 获取 ref 值 </button>
      </div>
    );
  }
}

export default App;
